<!--
* @author wn
* @date 2022/05/25 14:58:30
* @description: 图片下方 销售人气组件
!-->
<template>
	<ul class="goods-sales">
		<li>
			<p>销量人气</p>
			<p>200+</p>
			<p><i class="iconfont icon-task-filling"></i>销量人气</p>
		</li>
		<li>
			<p>商品评价</p>
			<p>400+</p>
			<p><i class="iconfont icon-comment-filling"></i>查看评价</p>
		</li>
		<li>
			<p>收藏人气</p>
			<p>600+</p>
			<p><i class="iconfont icon-favorite-filling"></i>收藏商品</p>
		</li>
		<li>
			<p>品牌信息</p>
			<p>苏宁电器</p>
			<p><i class="iconfont icon-dynamic-filling"></i>品牌主页</p>
		</li>
	</ul>
</template>
<script>
export default {
	name: 'GoodsSales',
}
</script>
<style scoped lang="less">
.goods-sales {
	display: flex;
	align-items: center;
	width: 400px;
	height: 140px;
	text-align: center;
	li {
		flex: 1;
		position: relative;
		~ li::before {
			position: absolute;
			top: 10px;
			left: 0;
			content: '';
			height: 60px;
			border-left: 1px solid #e4e4e4;
		}
		P {
			color: #999;
			&:nth-child(2) {
				color: @priceColor;
				margin-top: 10px;
			}
			&:nth-child(3) {
				color: #666;
				margin-top: 10px;
				i {
					color: @xtxColor;
					font-size: 14px;
					margin-right: 2px;
				}
				&:hover {
					color: @xtxColor;
					cursor: pointer;
				}
			}
		}
	}
}
</style>
